import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Vite 运行或构建项目时，能够自动执行 ESLint 代码检查和修复的插件
import eslint from 'vite-plugin-eslint'
// Node.js 内置的 path 模块
import * as path from 'path'
// 自动导入 API 的插件
import AutoImport from 'unplugin-auto-import/vite'
// 按需自动加载组件的插件
import Components from 'unplugin-vue-components/vite'
// 路由配置文件自动生成插件
import Pages from 'vite-plugin-pages'

// 项目中 src 目录的绝对路径
// __dirname 表示当前文件所在目录的绝对路径
const srcAbsolutePath: string = path.resolve(__dirname, './src')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslint({
      // 缓存现在可以正确识别文件更改，以减少执行时间
      cache: true,
      // 开启自动修复
      fix: true,
      // 打印警告信息
      emitWarning: true,
      // 发生警告不停止构建继续执行
      failOnWarning: false,
      // 打印错误信息
      emitError: true,
      // 发生错误停止构建
      failOnError: true,
      // 指定排除检查的文件和目录
      exclude: ['**/node_modules/**', '**/dist/**', '**/public/**', '**/src/assets/**'],
      // 指定要执行检查的文件和目录
      include: [
        'src/**/*.ts',
        'src/**/*.tsx',
        'src/**/*.js',
        'src/**/*.jsx',
        'src/**/*.vue',
        'src/*.ts',
        'src/*.tsx',
        'src/*.js',
        'src/*.jsx',
        'src/*.vue',
      ],
    }),
    // 自动导入 API 的插件
    AutoImport({
      // 自动引入 Vue API
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core',
        // 对 API 自动引入进行自定义
        // {
        //   // 对 @vueuse/core 进行自定义自动引入的 API
        //   '@vueuse/core': [
        //     // import { useMouse } from '@vueuse/core'
        //     'useMouse',
        //     // import { useFetch as useMyFetch } from '@vueuse/core'
        //     ['useFetch', 'useMyFetch'],
        //   ],
        // },
      ],
      // 指定哪些模块中的函数可以自动导入
      dirs: [
        // 自动引入 src/utils 目录下的模块
        'src/utils',
        // 自动引入 src/utils 目录下的所有模块(包括子模块)
        // 'src/utils/**',
      ],
      // 在项目根目录下生成 TS 声明文件
      dts: './auto-imports.d.ts',
      // 生成 ESLint 相关的配置文件 .eslintrc-auto-import.json
      eslintrc: {
        enabled: true,
      },
    }),
    // 按需自动加载组件的插件
    Components({
      // 指定自定义组件位置，默认是 src/components
      dirs: ['src/components'],
      // 指定自定义组件文件扩展
      extensions: ['vue'],
      // 在项目根目录下生成 TS 声明文件
      dts: './components.d.ts',
      // 是否搜索子目录
      deep: true,
      // UI 库解析器
      // resolvers: [],
    }),
    // 路由配置文件自动生成插件
    Pages({
      // 配置路由页面所在的目录
      dirs: [
        // 'src/pages',
        // 配置路由页面所在的目录，并配置该目录下路由页面对应路由的基础路由
        { dir: 'src/pages', baseRoute: '' },
      ],
      // 配置路由页面文件的文件拓展名
      extensions: ['vue'],
      // 配置排除不用自动生成路由的文件
      exclude: ['**/components/**/*.vue'],
      // 配置路由页面的导入模式为异步导入
      importMode: 'async',
      // importMode(filePath, options) {
      //   // filePath - 文件路径
      //   // options - 插件配置选项
      //   return 'async'
      // },
      // 路由别名的单词之间的分隔符，默认 '-'
      // routeNameSeparator: '-',
      // 配置导入自动生成的路由配置的模块名，vue 中默认 ~pages，即 import routes from ‘~pages’
      moduleId: '~pages',
      // 扩展生成的路由
      // extendRoute(route, parent) {
      extendRoute(route) {
        // route - 当前路由配置
        // parent - 父级路由配置
        // 如果当前生成的路由对应 src/pages/Error.vue 页面，则修改其路由匹配规则，让其匹配所有路由
        // src/pages/Error.vue 页面自动生成的路由为 baseRoute/error
        if (route.path === '/error') {
          route.path = '/:pathMatch(.*)*'
        }
        return route
      },
    }),
  ],
  css: {
    // css 预处理器配置选项
    preprocessorOptions: {
      // sass 预处理器
      scss: {
        javascriptEnabled: true,
        // additionalData: `@import "用于声明全局 sass 变量的文件的路径";`
        // 将用于声明全局 sass 变量的文件导入到每个 Vue 文件中的 style 样式模块中
        additionalData: `@import "./src/styles/var.scss";`,
      },
    },
  },
  // vite 构建工具中的解析器配置
  resolve: {
    // 配置别名解析
    alias: {
      // 将项目文件中使用的 `@` 解析为 `src` 目录的绝对路径
      '@': srcAbsolutePath,
    },
  },
})
